<template>
  <div
    class="tbody"
    v-loading="loading"
    :style="{ height: loading ? '180px' : 'auto' }"
    :element-loading-background="loadingBackGround"
    :element-loading-text="loadingText"
  >
    <template v-if="!loading">
      <template v-if="list.length">
        <slot name="list" />
      </template>
      <div v-else class="empty">
        <img class="nodata" :src="nodata" />
      </div>
    </template>
  </div>
</template>

<script setup>
import { LoadingBackGround, LoadingText } from "@/utils/constant";
import nodata from "@/utils/assets/nodata.svg";

defineProps({
  loading: {
    type: Boolean,
    default: () => false
  },
  list: {
    type: Array,
    default: () => []
  }
});
</script>

<style scoped lang="less">
.tbody {
  position: relative;
  .empty {
    min-height: 180px;
  }
  .nodata {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
